<template>
	<view>
		<view class="search-bar-style">
			<uni-search-bar bgColor="#EEEEEE" @confirm="search" :focus="true" v-model="keyword" @input="inputText"
				@clear="clearText" :placeholder="defaultTips" cancelButton="none">
			</uni-search-bar>
		</view>
		<view class="info-list">
			<uni-list>
				<uni-list-item direction="row" v-for="item in (infoDataPage?.result || [])" :key="item.id"
					:title="item.title" :note="item.author + ' '+formatTime(item.updateTime)" @click="goToDetail(item.id)" clickable="true">
					<template v-slot:header>
						<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="back-to-top" :style="{'display':(topState===true? 'block':'none')}">
			<uni-icons class="topc" type="arrowthinup" size="50" @click="backToTop"></uni-icons>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { queryInfoPageCondition } from '@/api/info/InfoDataController';
	import { InfoDataPage } from '@/entity/home/InfoDataPage';
	import { InfoDataQueryCondition } from '@/entity/query/InfoDataQueryCondition';
	import { onPageScroll } from '@dcloudio/uni-app'
	import {formatTime} from '@/utils/formatUtils'

	const infoDataPage = ref<InfoDataPage | null>(null);
	const defaultTips : string = "请输入搜索关键字"
	const keyword = ref<string>('');
	const topState = ref<boolean>(false);
	const search = async () => {
		infoDataPage.value = await loadInfoData(1, 10, keyword.value)
	}
	const inputText = () => { }
	const cancel = () => { }
	const clearText = () => {
		keyword.value = '';
		infoDataPage.value = null;
	}
	const loadInfoData = async (pageNo : number, pageSize : number, keyword : string) : Promise<InfoDataPage> => {
		// 调用API获取InfoDataPage数据
		const condition = new InfoDataQueryCondition();
		condition.setPageNo(pageNo);
		condition.setPageSize(pageSize);
		condition.setKeyword(keyword);
		return await queryInfoPageCondition(condition);
	};
	const goToDetail = (id :string) => {
		console.log("即将跳转，参数: "+ id)
		uni.navigateTo({
			url: `/pages/info-detail/info-detail?id=${id}`
		})
	}
	const backToTop = () => {
		//回到顶部  
		uni.pageScrollTo({
			scrollTop: 0, duration: 300
		});
	}
	onPageScroll((e) => {
		if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
			topState.value = true
		} else { //当距离小于600时显示回到顶部按钮
			topState.value = false
		}
	})
	onMounted(async () => {
		console.log("search页面组件挂载完成")
	});
</script>

<style lang="scss">
	
	.search-bar-style {
		
	}
	
	/* 回到顶部 */
	.back-to-top {
		position: relative;
		display: none;
		/* 先将元素隐藏 */
	}

	.topc {
		position: fixed;
		right: 0;
		background: #a9a9a9;
		top: 70%;
		height: 50px;
		line-height: 50px;
		border-radius: 50%;
	}
	
	.image-1 {
		flex-shrink: 0;
		margin-right: 10px;
		width: 125px;
		height: 75px;
		border-radius: 6px;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
	}
</style>